<script setup>
// watch:侦听数据变化 相当于某个值的change事件
// 用法：
/*
vue2:
  watch:{
    需要侦听的数据:{
        handler(newVal,oldVal){

        },
        deep,
        immediate
    }
  }
vue3:
  1:导入  import {watch} from 'vue'
  2:  使用
    const stop=watch('需要侦听的数据',(newVal,oldVal)=>{},{
      deep,
      immediate,
      flush:什么时间执行（渲染前pre，渲染后post，修改一次执行一次sync）
    })
    stop:侦听侦听的方法  stop()
  特点侦听
    1：侦听某个复杂数据类型只的一个属性值
    const stop=watch(()=>userInfo.value.age,(newVal)=>{},{...})
    2:同时可以侦听多个数据了
    const stop=watch([需要侦听数据a,()=>....],(newVal)=>{
      newVal===[需要侦听数据a的值,......]
    },{.....})
    3:flush配制项
       pre:默认值：默认执行回调函数是在渲染前执行
       post:执行回调函数是在渲染后执行
       sync:修改一次数据就执行一次回调(渲染前)
*/

import { ref, watch } from 'vue'
const num = ref(1)
const userInfo = ref({
  name: '张三',
  age: 10
})
const stop = watch(
  num,
  newVal => {
    console.log(newVal)
    // console.log(document.querySelector('#xxx').innerHTML)
  },
  {
    // immediate: true,
    flush: 'sync'
  }
)
const btnClick = () => {
  num.value = 2
  num.value = 3
}
// const stopAge = watch(
//   userInfo,
//   newVal => {
//     console.log('age', newVal)
//   },
//   {
//     deep: true
//   }
// )
// const stopAge = watch(
//   () => userInfo.value.age,
//   newVal => {
//     console.log('age watch', newVal)
//   }
// )
// watch([num, () => userInfo.value.age], newVal => {
//   console.log('多个数据的侦听', newVal)
// })
</script>

<template>
  <div class="-page">
    <h3 id="xxx">{{ num }}</h3>
    <button @click="btnClick">点击修改</button>
    <button @click="stop">停止侦听</button>
    <hr />
    <h3>{{ userInfo.age }}</h3>
    <button @click="userInfo.age++">修改age</button>
    <button @click="stopAge">停止侦听</button>
  </div>
</template>

<style lang="scss" scoped></style>
>
